<template>
  <div class="insert-container">
    <div class="insert-main">
      <div class="insert-main-left-box">
        <h2 class="title">添加文章</h2>
        <el-form ref="form" :model="articleInfo" label-width="80px" :label-position="labelPosition" size="small">
          <el-form-item label="文章标题">
            <el-input v-model="articleInfo.title"></el-input>
          </el-form-item>
          <el-form-item label="文章作者">
            <el-input v-model="articleInfo.author"></el-input>
          </el-form-item>
          <el-form-item label="文章标签">
            <el-checkbox-group v-model="articleInfo.tag">
              <el-checkbox :label="item" name="type" v-for="(item, index) in tags" :key="index">{{ item.tag_name }}</el-checkbox>
              <el-button type="primary" icon="el-icon-plus" circle size="mini" class="add_tag" @click="insertTags"></el-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="articleInfo.content" rows="12"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="insertArticle">立即添加</el-button>
            <el-button @click="getback">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="insert-main-center"></div>
      <div class="insert-main-right-box">
        <h2 class="title">文章总览</h2>
        <el-descriptions title="" direction="vertical" :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-c-scale-to-original"></i>
              文章标题
            </template>
            {{ articleInfo.title }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              文章作者
            </template>
            {{ articleInfo.author }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-collection-tag"></i>
              文章标签
            </template>
            <el-tag size="small" v-for="(item, index) in articleInfo.tag" :key="index" :span="2">{{ item.tag_name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              文章内容
            </template>
            {{ articleInfo.content }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
    </div>

    <!-- <el-divider><i class="el-icon-mobile-phone"></i></el-divider> -->
  </div>
</template>

<script>
export default {
  name: 'InsertArticle',
  data () {
    return {
      labelPosition: 'top',
      articleInfo: {
        // cover: '',
        title: '',
        author: '',
        tag: [],
        content: ''
      },
      tags: []
    }
  },
  methods: {
    getback () {
      this.$router.replace('/system/home/article')
    },
    async insertArticle () {
      const res = await this.$api.insertArticle({
        title: this.articleInfo.title,
        author: this.articleInfo.author,
        tag: JSON.stringify(this.articleInfo.tag),
        content: this.articleInfo.content
      })
      // console.log(res)
      if (res.data.err_code === 0) {
        this.$notify({
          title: '成功',
          message: res.data.message,
          type: 'success'
        })
        this.$router.replace('/system/home/article')
      }
    },
    async getAllTag () {
      const res = await this.$api.getAllTags()
      this.tags = res.data.data.tags
      console.log(res)
    },
    insertTags () {
      this.$prompt('请输入新的标签', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async ({ value }) => {
          const res = await this.$api.insertTag({ value })
          console.log(res)
          if (res.data.err_code === 0) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: res.data.message
            })
            this.tags = res.data.data
          }
        })
        .catch(() => {
          this.$notify.info({
            title: '消息',
            message: '取消输入'
          })
        })
    }
  },
  created () {
    this.getAllTag()
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 25px;
  text-align: center;
  margin-bottom: 20px;
}
.add_tag {
  margin-left: 15px;
}

.insert-main {
  display: flex;
  width: 100%;
  height: 100%;
  // justify-content: center;
}
.insert-main-left-box {
  flex: 1;
  margin-right: 20px;
}
.insert-main-right-box {
  flex: 1;
  margin-left: 20px;
}
.insert-main-center {
  width: 2px;
  height: 800px;
  background-color: #ccc;
}
</style>
